<template>
  <div class="padding-lr-xl">
    <el-card>

      <el-form
        :model="formData"
        :inline="true"
        ref="formRef"
        :rules="rules"
        label-width="auto"
        size="mini"
      >
        <el-row :gutter="5">
          <el-col :span="15">
            <el-form-item prop="channelIds" label="渠道名称">
              <el-select
                v-model="formData.channelIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key) in initData.channelNameMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="分区">
              <el-select
                v-model="formData.countryStateIds"
                multiple
                collapse-tags
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key) in initData.countryStateMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="客户" prop="customerIds">
              <el-select
                v-model="formData.customerIds"
                :remote-method="searchCustomer"
                multiple
                collapse-tags
                placeholder="请输入至少两个关键字"
                clearable
                filterable
                remote
              >
                <el-option
                  v-for="(item, key) in customerMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="chargeTypes" label="对内/外收费">
              <el-select
                v-model="formData.chargeTypes"
                placeholder="请选择"
                multiple
              >
                <el-option
                  v-for="(item, key) in initData.chargeTypeMap"
                  :key="key"
                  :label="item"
                  :value="parseInt(key)">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item prop="price" label="单价">
              <el-input type="number" v-model="formData.price" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="最低收费">
              <el-input type="number" v-model="formData.lowestFee" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="最高收费">
              <el-input type="number" v-model="formData.highestFee" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item label="备注">
              <el-input type="text" v-model="formData.remark" placeholder="请输入"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="success"
                size="mini"
                @click="submitForm('formRef')"
              >
                保存
              </el-button>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </el-card>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import { closeDialog } from "@/utils";

  export default {
    data() {
      return {
        customerMap: {},
        formData: {},
        initData: {},

        rules: {
          chargeTypes: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
          customerIds: [{
            required: true,
            message: '请选择',
            trigger: 'blur'
          }],
        },
      };
    },

    methods: {

      /**
       * 保存配置
       * */
      async save() {
        //请求后台
        const { code, data, message } = await ajax(
          "saveSpecial",
          this.formData
        );
        if (code !== 200) {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        //赋值：主键id
        if (data) {
          this.formData.id = data;
        }
        //提示保存成功
        this.$message({
          type: "success",
          message: "保存成功！"
        });
        closeDialog();
      },

      //校验必填字段
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.save();
          } else {
            console.log("数据校验失败，不允许提交");
            return false;
          }
        });
      },

      /**
       * 查询客户
       * */
      async searchCustomer(query) {
        if (query !== "" && query.length > 1) {
          ajax("searchCustomer", { arg: query },{
            class: "com.tofba.app.client.setting.DiscountConfigClient"
          }).then(
            res => {
              if (res.code == 200) {
                this.customerMap = res.data;
              } else {
                this.$message.error("数据异常");
              }
            },
            error => {
              console.log(error);
            }
          );
        }
      },

      //初始化下拉框选项
      async init() {
        const { code, data, message } = await ajax(
          "getInitDataSpecial",
          {}
        );
        if (code !== 200) {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
          return;
        }
        this.initData = data;
      },

      /**
       * 编辑时回显数据
       * */
      async showEditData() {
        let row = this.$store.state.edit.row;
        if (row.code !== 200) {
          this.$message.error("服务器异常");
          return;
        }
        this.formData = row.data;
        this.customerMap = row.data2;
      },
    },

    mounted() {
      this.init();
      if (this.$store.state.edit.id) {
        this.showEditData();
      }
    }
  };
</script>


<style>

</style>
